<template>
  <div class="about">
    <!--
          未接收到Props 页面上的Props值会为 undefined
          由于vue做了处理，undefined，null 不会显示到页面 所以数据展示的位置是空的
    -->
    {{ count }}
    <!--
          由于 vue 遵循单向数据流，父组件传递给子组件的数据，子组件只可以使用，不可以修改
          但是有时候子组件需要修改父级传过来的的数据，这时候可以使用 子传父
          接收父组件传递的一个函数，这个函数可以接收参数，而父组件通过传递过来的参数来修改自己的数据
          所以是子组件调用父组件的方法通知父组件修改，而不是子组件直接修改，所以遵循了单向数据流
    -->
    <button @click="increment(count+1)">加</button>
  </div>
</template>

<script>
export default {
  name: 'About',
  // 1. Props 的数组写法,
  // Props: ['count'],
  // 2. Props 的对象写法,
  props: {
    increment: Function,
    count: {
      // 对象写法可以限制 Props 的数据类型
      type: Number,
      // 也可以将 Props 限制为必须项
      required: true,
      // 同时可以给定数据一个默认值，如果 Props 没有接收到参数会使用默认值，也不会报错（推荐)
      // 注意 就算给了默认值 必填项还是需要传，否则 vue 控制台会报错
      default: () => 0
    }
  },
  data() {
    return {}
  }
}
</script>